<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>userIndex for freemarker</title>
<link href="../css/bootstrap.min.css" rel="stylesheet" />
<script src="../front/page/js/jquery.min.js"></script>
<script src="../front/page/js/jqPaginator.js"></script>
</head>
<body>
	<table>
		<thead>
			<tr>
				<td>序号</td>
				<td>姓名</td>
			</tr>
		</thead>
		<tbody id="userTable">
		</tbody>
	</table>
	<ul class="pagination"></ul>
</body>
<script type="text/javascript">
	$(function() {
		var param = {
			"name" : "admin"
		};
		loadUser("../demo/page.do", param);
	});
	function loadUser(url, param) {
		//计算totalPages，visiblePages，currentPage
		$.ajax({
			type : 'get',
			url : url,
			dataType : 'json',
			success : function(obj) {
				createPage(obj.data.totalPage, obj.data.pageSize, obj.data.curPage, url);
			}
		});
	}
	function createPage(totalPages, visiblePages, currentPage, url,param) {
		$.jqPaginator('.pagination', {
			totalPages : totalPages,
			visiblePages : visiblePages,
			currentPage : currentPage,
			onPageChange : function(num, type) {
				$.ajax({
					type : 'get',
					url : url + "?pageNo=" + num || 1,
					param : param,
					dataType : 'json',
					success : function(obj) {
						var $user = $("#userTable");
						$user.empty();
						$.each(obj.data.list, function(i, item) {
							$user.append("<tr> " + "<td>" + (i + 1) + "</td>" + "<td>" + item.name + "</td>" + " </tr>");
						});
					}
				});
			}
		});
	}
</script>
</html>
